<template>
  <div :style="{width:'100%',height:'100%'}" ref="homeEch"></div>
</template>

<script>
export default {
  name: "Age",
  data() {
    return {
      data: [
      ],
      agelist: [{}]
    };
  },
  created() {
    // this.echarts();
  },
  mounted() {  
    this.echarts();
    this.resizefun = () => {
      this.$echarts.init(this.$refs.homeEch).resize();
    };
    window.addEventListener("resize", this.resizefun);
  },
  //移除事件监听，避免内存泄漏
  beforeDestroy() {
    window.removeEventListener("resize", this.resizefun);
    this.resizefun = null;
  },
  methods: {
    // 年龄比例接口
    echarts() {
        let that = this;
      let myChart = this.$echarts.init(this.$refs.homeEch);
    
      
        let data = {
            names: ['18-25岁', '26-35岁', '36-45岁', '45岁以上'],
            values: [{
                name: '18-25岁', value: 251
            },
            {
                name: '26-35岁', value: 517
            },
            {
                name: '36-45岁', value: 306
            },
            {
                name: '45岁以上', value: 962
            },]
        }
        let valuelist = data.values.map(
            function (item, index) {
                return {
                    name: item.name,
                    value: item.value,
                    itemStyle: {
                        normal: {
                            color: that.$colors[index]
                        }
                    }
                }
            }
        )
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'horizontal',
                top: 0,
                data: data.names,
                textStyle: {
                    color: "#fff"
                }
            },
            series: [
                {
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        }
                    },
                    name: '',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: valuelist
                }
            ]
        };


        myChart.setOption(option);
    }
  }
};
</script>

<style>
</style>